{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}my information{% endblock %}

{% block content %}
<div class="row text-center vertical-middle-sm">
    <h1>个人信息</h1>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-4 text-right"><span>用户名：</span></div>
                <div class="col-md-8 text-left">{{ user.username }}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>邮箱：</span></div>
                <div class="col-md-8 text-left">{{ user.email }}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>电话：</span></div>
                <div class="col-md-8 text-left">{{ userprofile.phone }}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>公司：</span></div>
                <div class="col-md-8 text-left">{{ userinfo.company }}</div>
            </div>
             <div class="row">
                <div class="col-md-4 text-right"><span>职业：</span></div>
                <div class="col-md-8 text-left">{{ userinfo.profession }}</div>
            </div>
             <div class="row">
                <div class="col-md-4 text-right"><span>个人介绍：</span></div>
                <div class="col-md-8 text-left">{{ userinfo.aboutme }}</div>
            </div>
            <a href="{% url 'account:editme' %}">
                <button class="btn btn-primary btn-lg">edit my information</button>
            </a>
        </div>
        <!--  显示头像      -->
        <div class="col-md-6">
            <div style="margin-right: 100px">
                {% if userinfo.photo %}
                <img src="{{ userinfo.photo | striptags }}" alt="" class="img-circle" id="my_photo">
                {% else %}
                <img src="{% static 'images/avatar.png' %}" alt="">
                {% endif %}
            </div>
            <div style="margin-right:100px">
                <button class="btn btn-primary btn-lg" id="upload_image" onclick="upload_image_layer()">上传头像</button>
            </div>
        </div>
    </div>
</div>
<!-- 引入弹出层 -->
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'js/layer.js' %}"></script>
<script>
    function upload_image_layer() {
        layer.open({
            title: '上传头像',
            area: ['600px', '600px'],
            type: 2,
            content: '{% url "account:my_image" %}',
        })
    }
</script>
{% endblock %}